μΉ κ°λ°μμ λμμ΄λλ₯Ό μν μ’ ν© κ°μ΄λ: CSS font-feature-settingsλ₯Ό νμ©ν΄ ν©μ, 컀λ, μ€νμΌ μΈνΈ λ± κ³ κΈ μ€ννμ νμ΄ν¬κ·ΈλνΌ κΈ°λ₯μ μ μ΄νλ λ°©λ²μ μμ보μΈμ.
νμ΄ν¬κ·ΈλνΌμ νμ λ°ννλ€: CSS ν°νΈ κΈ°λ₯ κ°κ³Ό OpenType μ¬μΈ΅ νꡬ
μΉ λμμΈμ μΈκ³μμ νμ΄ν¬κ·ΈλνΌλ μ’ μ’ μ¬μ©μ κ²½νμ μ¨μ μμ μ λλ€. μ°λ¦¬λ λͺ ννκ³ μ¬λ―Έμ μΌλ‘ λ§μ‘±μ€λ¬μ΄ μΈν°νμ΄μ€λ₯Ό λ§λ€κΈ° μν΄ ν°νΈ κ³μ΄, κ΅΅κΈ°, ν¬κΈ°λ₯Ό κΌΌκΌΌνκ² μ νν©λλ€. νμ§λ§ λ κΉμ΄ λ€μ΄κ° μ μλ€λ©΄ μ΄λ¨κΉμ? μ°λ¦¬κ° λ§€μΌ μ¬μ©νλ ν°νΈ νμΌμ΄ λ νλΆνκ³ , ννλ ₯ μμΌλ©°, μ λ¬Έμ μΈ νμ΄ν¬κ·ΈλνΌμ λΉλ°μ κ°μ§νκ³ μλ€λ©΄ μ΄λ¨κΉμ? μ¬μ€, κ·Έλ μ΅λλ€. μ΄ λΉλ°λ€μ OpenType κΈ°λ₯μ΄λΌκ³ λΆλ¦¬λ©°, CSSλ μ°λ¦¬μκ² κ·Έκ²λ€μ μ κΈ ν΄μ ν μ μλ μ΄μ λ₯Ό μ 곡ν©λλ€.
λ무 μ€λ«λμ, μ§μ ν μλ¬Έμ λλ¬Έμ(μ€λͺ°μΊ‘), μ°μν μμ ν©μ, λ¬Έλ§₯μ μΈμνλ μ«μ μ€νμΌκ³Ό κ°μ΄ μΈμ λμμ΄λλ€μ΄ λ리λ λ―Έλ¬ν μ μ΄κ° μΉμμλ λΆκ°λ₯ν΄ λ³΄μμ΅λλ€. μ€λλ , λλ κ·Έλ μ§ μμ΅λλ€. μ΄ μ’ ν© κ°μ΄λλ μ¬λ¬λΆμ CSS ν°νΈ κΈ°λ₯ κ°μ μΈκ³λ‘ μλ΄νμ¬, μΉ ν°νΈμ λͺ¨λ νμ νμ©νμ¬ μ§μ μΌλ‘ μ κ΅νκ³ κ°λ μ± λμ λμ§νΈ κ²½νμ λ§λλ λ°©λ²μ νꡬν κ²μ λλ€.
OpenType κΈ°λ₯μ΄λ μ νν 무μμΈκ°?
CSSμ λν΄ μμ보기 μ μ, μ°λ¦¬κ° 무μμ μ μ΄νλμ§ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. OpenTypeμ κΈ°λ³Έμ μΈ κΈμ, μ«μ, κΈ°νΈμ λͺ¨μμ λμ΄μλ λ°©λν μμ λ°μ΄ν°λ₯Ό ν¬ν¨ν μ μλ ν°νΈ νμμ λλ€. μ΄ λ°μ΄ν° λ΄μμ ν°νΈ λμμ΄λλ 'κΈ°λ₯'μ΄λΌ λΆλ¦¬λ λ€μν μ νμ κΈ°λ₯μ λ΄μ₯ν μ μμ΅λλ€.
μ΄λ¬ν κΈ°λ₯λ€μ νλ‘κ·Έλλ° λ°©μμΌλ‘ μΌκ±°λ λ μ μλ λ΄μ₯λ μ§μΉ¨μ΄λ λ체 λ¬Έμ λμμΈ(κΈλ¦¬ν)μΌλ‘ μκ°ν΄λ³΄μΈμ. μ΄κ²μ ν΅μ΄λ λΈλΌμ°μ νΈλ¦μ΄ μλλλ€. μ΄κ²μ ν°νΈλ₯Ό λ§λ νμ΄ν¬κ·ΈλνΌκ° λ΄λ¦° μλμ μΈ λμμΈ μ νμ λλ€. OpenType κΈ°λ₯μ νμ±ννλ©΄, νΉμ λͺ©μ μ μν΄ μλλ ν°νΈ λμμΈμ νΉμ λΆλΆμ μ¬μ©νλλ‘ λΈλΌμ°μ μ μμ²νλ κ²μ λλ€.
μ΄λ¬ν κΈ°λ₯λ€μ λ λμ κ°κ²©μΌλ‘ κ°λ μ±μ ν₯μμν€λ κ²κ³Ό κ°μ μμ ν κΈ°λ₯μ μΈ κ²μμλΆν°, ν€λλΌμΈμ μ₯μμ μΈ ν¨κ³Όλ₯Ό μΆκ°νλ κ²κ³Ό κ°μ μμ ν λ―Έμ μΈ κ²κΉμ§ λ€μν©λλ€.
CSS κ²μ΄νΈμ¨μ΄: μμ μμ€ μμ±κ³Ό νμ μμ€ μ μ΄
CSSλ OpenType κΈ°λ₯μ μ κ·Όνλ λ κ°μ§ μ£Όμ λ°©λ²μ μ 곡ν©λλ€. νλμ μ΄κ³ μ νΈλλ μ κ·Ό λ°©μμ μμ μμ€μ μλ§¨ν± μμ±λ€μ μ¬μ©νλ κ²μ λλ€. κ·Έλ¬λ μ΅λμ μ μ΄κ° νμν λλ₯Ό μν νμ μμ€μ κ°λ ₯ν 'λ§λ₯' μμ±λ μμ΅λλ€.
μ νΈλλ λ°©λ²: μμ μμ€ μμ±
μ΅μ CSSλ `font-kerning`κ³Ό ν¨κ» `font-variant` κ³μ΄μ μ¬λ¬ μμ±μ μ 곡ν©λλ€. μ΄ μμ±λ€μ μ΄λ¦μ΄ κ·Έ λͺ©μ μ λͺ ννκ² μ€λͺ νμ¬ μ½λλ₯Ό λ μ½κΈ° μ½κ³ μ μ§λ³΄μνκΈ° μ’κ² λ§λ€κΈ° λλ¬Έμ λͺ¨λ² μ¬λ‘λ‘ κ°μ£Όλ©λλ€.
- font-kerning: ν°νΈμ μ μ₯λ 컀λ μ 보 μ¬μ©μ μ μ΄ν©λλ€.
- font-variant-ligatures: μΌλ°, μμ, μμ¬μ , λ¬Έλ§₯μ ν©μλ₯Ό μ μ΄ν©λλ€.
- font-variant-numeric: μ«μ, λΆμ, μ¬λμκ° μλ 0μ λν λ€μν μ€νμΌμ μ μ΄ν©λλ€.
- font-variant-caps: μλ¬Έμ λλ¬Έμ(μ€λͺ°μΊ‘)μ κ°μ λλ¬Έμ λ³νμ μ μ΄ν©λλ€.
- font-variant-alternates: μ€νμΌ λ체 λ° λ¬Έμ λ³νμ λν μ κ·Όμ μ 곡ν©λλ€.
μ΄ μμ±λ€μ μ£Όμ μ₯μ μ λΈλΌμ°μ μκ² λ¬μ±νκ³ μ νλ κ²(μ: `font-variant-caps: small-caps;`)μ μλ €μ£Όλ©΄, λΈλΌμ°μ κ° μ΄λ₯Ό μννλ μ΅μμ λ°©λ²μ μ°Ύλλ€λ κ²μ λλ€. νΉμ κΈ°λ₯μ μ¬μ©ν μ μλ κ²½μ°, λΈλΌμ°μ κ° μ΄λ₯Ό μμ°μ€λ½κ² μ²λ¦¬ν μ μμ΅λλ€.
κ°λ ₯ν λꡬ: `font-feature-settings`
μμ μμ€ μμ±λ€μ΄ νλ₯νμ§λ§, μ¬μ© κ°λ₯ν λͺ¨λ OpenType κΈ°λ₯μ λ€λ£¨μ§λ μμ΅λλ€. μμ ν μ μ΄λ₯Ό μν΄, μ°λ¦¬λ νμ μμ€μ `font-feature-settings` μμ±μ κ°μ§κ³ μμ΅λλ€. μ΄λ μ’ μ’ μ΅νμ μλ¨μΌλ‘ μ€λͺ λμ§λ§, λ―Ώμ μ μμ μ λλ‘ κ°λ ₯ν λꡬμ λλ€.
λ¬Έλ²μ λ€μκ³Ό κ°μ΅λλ€:
font-feature-settings: "
- κΈ°λ₯ νκ·Έ: νΉμ OpenType κΈ°λ₯μ μλ³νλ λμλ¬Έμλ₯Ό ꡬλΆνλ 4μ리 λ¬Έμμ΄μ λλ€ (μ: `"liga"`, `"smcp"`, `"ss01"`).
- κ°: μΌλ°μ μΌλ‘ μ μμ λλ€. λ§μ κΈ°λ₯μμ `1`μ 'μΌκΈ°'λ₯Ό, `0`μ 'λκΈ°'λ₯Ό μλ―Έν©λλ€. μ€νμΌ μΈνΈμ κ°μ μΌλΆ κΈ°λ₯μ νΉμ λ³νμ μ ννκΈ° μν΄ λ€λ₯Έ μ μ κ°μ λ°μ μ μμ΅λλ€.
ν©κΈλ₯ : νμ μμ μμ€μ `font-variant-*` μμ±μ λ¨Όμ μ¬μ©ν΄λ³΄μΈμ. λ§μ½ νμν κΈ°λ₯μ΄ μ΄λ₯Ό ν΅ν΄ μ κ·Όν μ μκ±°λ, μμ μμ€ μμ±μ΄ νμ©νμ§ μλ λ°©μμΌλ‘ κΈ°λ₯μ μ‘°ν©ν΄μΌ ν κ²½μ°, κ·Έλ `font-feature-settings`λ₯Ό μ¬μ©νμΈμ.
μΌλ°μ μΈ OpenType κΈ°λ₯ μ€μ© κ°μ΄λ
CSSλ‘ μ μ΄ν μ μλ κ°μ₯ μ μ©νκ³ ν₯λ―Έλ‘μ΄ OpenType κΈ°λ₯ μ€ μΌλΆλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€. κ° κΈ°λ₯μ λν΄ κ·Έ λͺ©μ , 4μ리 νκ·Έ, κ·Έλ¦¬κ³ νμ±ννλ CSSλ₯Ό λ€λ£° κ²μ λλ€.
μΉ΄ν κ³ λ¦¬ 1: ν©μ(Ligatures) - λ¬Έμλ₯Ό μ°μνκ² μ°κ²°νκΈ°
ν©μ(Ligatures)λ λ κ° μ΄μμ λ¬Έμλ₯Ό νλμ, λ μ‘°νλ‘μ΄ λͺ¨μμΌλ‘ κ²°ν©νλ νΉλ³ν κΈλ¦¬νμ λλ€. μ΄λ μ΄μν λ¬Έμ μΆ©λμ λ°©μ§νκ³ ν μ€νΈμ νλ¦μ κ°μ νλ λ° νμμ μ λλ€.
νμ€ ν©μ
- νκ·Έ: `liga`
- λͺ©μ : `fi`, `fl`, `ff`, `ffi`, `ffl`κ³Ό κ°μ μΌλ°μ μ΄κ³ λ¬Έμ κ° λλ λ¬Έμ μ‘°ν©μ νΉλ³ν λμμΈλ λ¨μΌ κΈλ¦¬νλ‘ λ체ν©λλ€. μ΄κ²μ λ§μ ν°νΈμμ κ°λ μ±μ μν κΈ°λ³Έ κΈ°λ₯μ λλ€.
- μμ μμ€ CSS: `font-variant-ligatures: common-ligatures;` (λΈλΌμ°μ μμ κΈ°λ³Έμ μΌλ‘ μΌμ Έ μλ κ²½μ°κ° λ§μ)
- νμ μμ€ CSS: `font-feature-settings: "liga" 1;`
μμ ν©μ
- νκ·Έ: `dlig`
- λͺ©μ : μ΄κ²λ€μ `ct`, `st`, `sp`μ κ°μ μ‘°ν©μ μν λ μ₯μμ μ΄κ³ μ€νμΌλ¦¬μν ν©μμ λλ€. κ°λ μ±μ νμμ μ΄μ§ μμΌλ©°, μ°μν¨μ λνκΈ° μν΄ μ’ μ’ μ λͺ©μ΄λ λ‘κ³ μ μ νμ μΌλ‘ μ¬μ©ν΄μΌ ν©λλ€.
- μμ μμ€ CSS: `font-variant-ligatures: discretionary-ligatures;`
- νμ μμ€ CSS: `font-feature-settings: "dlig" 1;`
μΉ΄ν κ³ λ¦¬ 2: μ«μ(Numerals) - μ©λμ λ§λ μ¬λ°λ₯Έ μ«μ
λͺ¨λ μ«μκ° λκ°μ΄ λ§λ€μ΄μ§μ§λ μμμ΅λλ€. μ’μ ν°νΈλ λ€μν λ¬Έλ§₯μ λ§λ λ€λ₯Έ μ€νμΌμ μ«μλ₯Ό μ 곡νλ©°, μ΄λ₯Ό μ μ΄νλ κ²μ μ λ¬Έμ μΈ νμ΄ν¬κ·ΈλνΌμ νΉμ§μ λλ€.
μ¬λμ€νμΌ μ«μ vs. λΌμ΄λ μ«μ
- νκ·Έ: `onum` (μ¬λμ€νμΌ), `lnum` (λΌμ΄λ)
- λͺ©μ : λΌμ΄λ μ«μλ μ°λ¦¬κ° μ΄λμλ 보λ νμ€ μ«μμ λλ€βλͺ¨λ λμ΄κ° κ· μΌνλ©° λλ¬Έμμ μ λ ¬λ©λλ€. μ«μκ° μμ§μΌλ‘ μ λ ¬λμ΄μΌ νλ ν, μ°¨νΈ, μ¬μ©μ μΈν°νμ΄μ€μ μλ²½ν©λλ€. λ°λ©΄μ μ¬λμ€νμΌ μ«μλ μλ¬Έμμ²λΌ μ΄μΌλ(ascender)μ λμΌλ(descender)κ° μμ΄ λμ΄κ° λ€μν©λλ€. μ΄λ‘ μΈν΄ ν μ€νΈ λ¨λ½μ μμ°μ€λ½κ² λ Ήμλ€μ΄ λμ λμ§ μμ΅λλ€.
- μμ μμ€ CSS: `font-variant-numeric: oldstyle-nums;` λλ `font-variant-numeric: lining-nums;`
- νμ μμ€ CSS: `font-feature-settings: "onum" 1;` λλ `font-feature-settings: "lnum" 1;`
λΉλ‘ μ«μ vs. κ³ μ ν μ«μ
- νκ·Έ: `pnum` (λΉλ‘), `tnum` (κ³ μ ν)
- λͺ©μ : μ΄κ²μ μ«μμ λλΉλ₯Ό μ μ΄ν©λλ€. κ³ μ ν μ«μλ κ³ μ ν(monospaced)μ λλ€βκ° μ«μκ° μ νν λμΌν μν 곡κ°μ μ°¨μ§ν©λλ€. μ΄λ μ¬λ¬΄ λ³΄κ³ μ, μ½λ λλ λ€λ₯Έ νμ μ«μλ€μ΄ μ΄μμ μλ²½νκ² μ λ ¬λμ΄μΌ νλ λͺ¨λ λ°μ΄ν° ν μ΄λΈμ μ€μν©λλ€. λΉλ‘ μ«μλ κ°λ³ λλΉλ₯Ό κ°μ§λλ€. μλ₯Ό λ€μ΄, μ«μ '1'μ μ«μ '8'λ³΄λ€ μ μ 곡κ°μ μ°¨μ§ν©λλ€. μ΄κ²μ λ κ· μΌν κ°κ²©μ λ§λ€κ³ λ³Έλ¬Έ ν μ€νΈμ μ¬μ©νκΈ°μ μ΄μμ μ λλ€.
- μμ μμ€ CSS: `font-variant-numeric: proportional-nums;` λλ `font-variant-numeric: tabular-nums;`
- νμ μμ€ CSS: `font-feature-settings: "pnum" 1;` λλ `font-feature-settings: "tnum" 1;`
λΆμμ μ¬λμ 0
- νκ·Έ: `frac` (λΆμ), `zero` (μ¬λμ 0)
- λͺ©μ : `frac` κΈ°λ₯μ `1/2`μ κ°μ ν μ€νΈλ₯Ό μ§μ ν λκ°μ λΆμ κΈλ¦¬ν(Β½)λ‘ μλ¦λ΅κ² νμνν©λλ€. `zero` κΈ°λ₯μ νμ€ '0'μ λλ¬Έμ 'O'μ λͺ ννκ² κ΅¬λ³νκΈ° μν΄ μ¬λμλ μ μ΄ μλ λ²μ μΌλ‘ λ체ν©λλ€. μ΄λ κΈ°μ λ¬Έμ, μΌλ ¨ λ²νΈ, μ½λμμ λ§€μ° μ€μν©λλ€.
- μμ μμ€ CSS: `font-variant-numeric: diagonal-fractions;` λ° `font-variant-numeric: slashed-zero;`
- νμ μμ€ CSS: `font-feature-settings: "frac" 1, "zero" 1;`
μΉ΄ν κ³ λ¦¬ 3: 컀λ(Kerning) - κ°κ²©μ μμ
컀λ
- νκ·Έ: `kern`
- λͺ©μ : 컀λμ μκ°μ λ§€λ ₯κ³Ό κ°λ μ±μ ν₯μμν€κΈ° μν΄ κ°λ³ λ¬Έμ μ μ¬μ΄μ 곡κ°μ μ‘°μ νλ κ³Όμ μ λλ€. μλ₯Ό λ€μ΄, "AV" μ‘°ν©μμ Vλ A μλλ‘ μ½κ° λ€μ΄κ° μμ΅λλ€. λλΆλΆμ κ³ νμ§ ν°νΈμλ μλ°± λλ μμ² κ°μ μ΄λ¬ν 컀λ μμ΄ ν¬ν¨λμ΄ μμ΅λλ€. κ±°μ νμ κΈ°λ³Έμ μΌλ‘ νμ±νλμ΄ μμ§λ§, μ μ΄ν μ μμ΅λλ€.
- μμ μμ€ CSS: `font-kerning: normal;` (κΈ°λ³Έκ°) λλ `font-kerning: none;`
- νμ μμ€ CSS: `font-feature-settings: "kern" 1;` (μΌκΈ°) λλ `font-feature-settings: "kern" 0;` (λκΈ°)
μΉ΄ν κ³ λ¦¬ 4: λμλ¬Έμ λ³ν - λλ¬Έμμ μλ¬Έμλ₯Ό λμ΄μ
μλ¬Έμ λλ¬Έμ (μ€λͺ°μΊ‘)
- νκ·Έ: `smcp` (μλ¬Έμμμ), `c2sc` (λλ¬Έμμμ)
- λͺ©μ : μ΄ κΈ°λ₯μ μ§μ ν μλ¬Έμ λλ¬Έμ(μ€λͺ°μΊ‘)λ₯Ό νμ±νν©λλ€. μ΄κ²μ μλ¬Έμ λμ΄λ₯Ό κ°μ§λ©΄μ λλ¬Έμ ννλ₯Ό κ°μ§ νΉλ³ν λμμΈλ κΈλ¦¬νμ λλ€. λ¨μν μ 체 ν¬κΈ° λλ¬Έμλ₯Ό μΆμνμ¬ λ§λ "κ°μ§" μ€λͺ°μΊ‘λ³΄λ€ ν¨μ¬ μ°μν©λλ€. μ½μ΄, λΆμ λͺ© λλ κ°μ‘°μ μ¬μ©νμΈμ.
- μμ μμ€ CSS: `font-variant-caps: small-caps;`
- νμ μμ€ CSS: `font-feature-settings: "smcp" 1;`
μΉ΄ν κ³ λ¦¬ 5: μ€νμΌ λ체 - λμμ΄λμ μκΈΈ
μ΄κ²μ΄ λ°λ‘ νμ΄ν¬κ·ΈλνΌκ° μ§μ μΌλ‘ ννλ ₯μ λ°ννλ λΆλΆμ λλ€. λ§μ ν°νΈμλ ν μ€νΈμ λΆμκΈ°λ μ€νμΌμ λ°κΎΈκΈ° μν΄ κ΅μ²΄ν μ μλ λ¬Έμμ λ체 λ²μ μ΄ ν¨κ» μ 곡λ©λλ€.
μ€νμΌ μΈνΈ
- νκ·Έ: `ss01`λΆν° `ss20`κΉμ§
- λͺ©μ : μ΄κ²μ κ°μ₯ ν₯λ―Έλ‘μ΄ κΈ°λ₯ μ€ νλμ΄μ§λ§, `font-feature-settings`λ₯Ό ν΅ν΄μλ§ μ κ·Όν μ μμ΅λλ€. ν°νΈ λμμ΄λλ κ΄λ ¨λ μ€νμΌ λ체 κΈλ¦¬νλ₯Ό μΈνΈλ‘ κ·Έλ£Ήνν μ μμ΅λλ€. μλ₯Ό λ€μ΄, `ss01`μ λ¨μΈ΅ 'a'λ₯Ό νμ±ννκ³ , `ss02`λ 'y'μ 꼬리λ₯Ό λ³κ²½νλ©°, `ss03`μ λ κΈ°ννμ μΈ κ΅¬λμ μΈνΈλ₯Ό μ 곡ν μ μμ΅λλ€. κ°λ₯μ±μ μ μ μΌλ‘ ν°νΈ λμμ΄λμκ² λ¬λ € μμ΅λλ€.
- νμ μμ€ CSS: `font-feature-settings: "ss01" 1;` λλ `font-feature-settings: "ss01" 1, "ss05" 1;`
μ€μμ
- νκ·Έ: `swsh`
- λͺ©μ : μ€μμλ μ’ μ’ λ¨μ΄μ μμμ΄λ λμ λ¬Έμμ μΆκ°λλ μ₯μμ μ΄κ³ νλ €ν μ₯μμ λλ€. μ€ν¬λ¦½νΈ λ° λμ€νλ μ΄ ν°νΈμμ νν λ³Ό μ μμΌλ©°, λλ‘ μΊ‘μ΄λ λ‘κ³ μ λ¨μΌ λ¨μ΄μ κ°μ΄ μ΅λμ ν¨κ³Όλ₯Ό μν΄ λ§€μ° λλ¬Όκ² μ¬μ©ν΄μΌ ν©λλ€.
- νμ μμ€ CSS: `font-feature-settings: "swsh" 1;`
ν°νΈμμ μ¬μ© κ°λ₯ν κΈ°λ₯ μ°Ύλ λ°©λ²
μ΄ λͺ¨λ κ²μ΄ νλ₯νμ§λ§, μ νν ν°νΈκ° μ€μ λ‘ μ΄λ€ κΈ°λ₯μ μ§μνλμ§ μ΄λ»κ² μ μ μμκΉμ? κΈ°λ₯μ ν°νΈ λμμ΄λκ° ν°νΈ νμΌμ λ΄μ₯ν κ²½μ°μλ§ μλν©λλ€. νμΈνλ λͺ κ°μ§ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€:
- ν°νΈ μλΉμ€ 견본 νμ΄μ§: λλΆλΆμ νν μ’μ ν°νΈ μ μμ¬ λ° μλΉμ€(μ: Adobe Fonts, Google Fonts, μμ μ© νμ νμ΄λ리)λ ν°νΈμ λ©μΈ νμ΄μ§μμ μ§μλλ OpenType κΈ°λ₯μ λμ΄νκ³ μμ°ν©λλ€. μ΄κ²μ΄ λ³΄ν΅ μμνκΈ°μ κ°μ₯ μ¬μ΄ λ°©λ²μ λλ€.
- λΈλΌμ°μ κ°λ°μ λꡬ: μ΅μ λΈλΌμ°μ μλ μ΄λ₯Ό μν λλΌμ΄ λκ΅¬κ° μμ΅λλ€. Chrome λλ Firefoxμμ μμλ₯Ό κ²μ¬νκ³ "Computed" νμΌλ‘ μ΄λν λ€μ 맨 μλλ‘ μ€ν¬λ‘€νμΈμ. μ¬μ© μ€μΈ ν°νΈ νμΌμ μλ €μ£Όλ "Rendered Fonts" μΉμ μ μ°Ύμ μ μμ΅λλ€. Firefoxμλ μ νν μμμ ν°νΈμ λν΄ μ¬μ© κ°λ₯ν λͺ¨λ OpenType κΈ°λ₯ νκ·Έλ₯Ό λͺ μμ μΌλ‘ λμ΄νλ μ μ© "Fonts" νμ΄ μμ΅λλ€. μ΄λ ν°νΈμ κΈ°λ₯μ μ€μκ°μΌλ‘ νμν μ μλ λ§€μ° κ°λ ₯ν λ°©λ²μ λλ€.
- λ°μ€ν¬ν± ν°νΈ λΆμ λꡬ: λ‘컬μ μ€μΉλ ν°νΈ νμΌ(`.otf`, `.ttf`)μ κ²½μ°, ν°νΈ νμΌμ λΆμνμ¬ λͺ¨λ κΈ°λ₯, μ§μ μΈμ΄, κΈλ¦¬νμ λν μμΈ λ³΄κ³ μλ₯Ό μ 곡νλ μ λ¬Έ μ ν리μΌμ΄μ μ΄λ μΉμ¬μ΄νΈ(μ: wakamaifondue.com)λ₯Ό μ¬μ©ν μ μμ΅λλ€.
μ±λ₯ λ° λΈλΌμ°μ μ§μ
λ κ°μ§ μΌλ°μ μΈ μ°λ €λ μ±λ₯κ³Ό λΈλΌμ°μ νΈνμ±μ λλ€. μ’μ μμμ λ λ€ νλ₯νλ€λ κ²μ λλ€.
- λΈλΌμ°μ μ§μ: `font-feature-settings` μμ±μ μλ λμ λͺ¨λ μ£Όμ λΈλΌμ°μ μμ λ리 μ§μλμμ΅λλ€. μ΅μ `font-variant-*` μμ± λν μ λ°μ μΌλ‘ νλ₯ν μ§μμ λ°μ΅λλ€. μμ¬νκ³ μ¬μ©ν μ μμ΅λλ€.
- μ±λ₯: OpenType κΈ°λ₯μ νμ±ννλ κ²μ λ λλ§ μ±λ₯μ λ―Έλ―Έν μν₯μ λ―ΈμΉ©λλ€. λ‘μ§κ³Ό λ체 κΈλ¦¬νλ μ΄λ―Έ λ€μ΄λ‘λλ ν°νΈ νμΌμ ν¬ν¨λμ΄ μμ΅λλ€. λ¨μ§ λΈλΌμ°μ μ λ λλ§ μμ§μ μ΄λ€ μ§μΉ¨μ λ°λ₯Όμ§ μλ €μ£Όλ κ²λΏμ λλ€. μ±λ₯ λΉμ©μ κΈ°λ₯ μ¬μ©μ΄ μλλΌ ν°νΈ νμΌ μ체μ ν¬κΈ°μ μμ΅λλ€. λ§μ κΈ°λ₯μ κ°μ§ ν°νΈλ νμΌ ν¬κΈ°κ° λ ν΄ μ μμ§λ§, μ΄λ₯Ό νμ±ννλ κ²μ κ±°μ λΉμ©μ΄ λ€μ§ μμ΅λλ€.
λͺ¨λ² μ¬λ‘ λ° μ€ν κ°λ₯ν ν΅μ°°λ ₯
ν° νμλ ν° μ± μμ΄ λ°λ¦ λλ€. ν°νΈ κΈ°λ₯μ ν¨κ³Όμ μ΄κ³ μ λ¬Έμ μΌλ‘ μ¬μ©νλ λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
1. μ μ§μ ν₯μμ μν΄ κΈ°λ₯ μ¬μ©νκΈ°
OpenType κΈ°λ₯μ ν₯μ κΈ°λ₯μΌλ‘ μκ°νμΈμ. ν μ€νΈλ κ·Έκ²λ€ μμ΄λ μλ²½νκ² μ½μ μ μκ³ κΈ°λ₯μ μ΄μ΄μΌ ν©λλ€. μ¬λμ€νμΌ μ«μλ μμ ν©μλ₯Ό νμ±ννλ κ²μ μ΅μ λΈλΌμ°μ λ₯Ό μ¬μ©νλ μ¬μ©μλ€μ μν΄ νμ΄ν¬κ·ΈλνΌ νμ§μ λμ¬ λ μ’κ³ μΈλ ¨λ κ²½νμ λ§λ€μ΄ μ€ λΏμ λλ€.
2. λ¬Έλ§₯μ΄ μ λΆμ λλ€
μκ° μμ΄ κΈ°λ₯μ μ μμ μΌλ‘ μ μ©νμ§ λ§μΈμ. μ¬λ°λ₯Έ μ₯μμ μ¬λ°λ₯Έ κΈ°λ₯μ μ μ©νμΈμ.
- λ³Έλ¬Έ λ¨λ½μλ μ¬λμ€νμΌ λΉλ‘ μ«μλ₯Ό μ¬μ©νμΈμ.
- λ°μ΄ν° ν μ΄λΈκ³Ό κ°κ²© λͺ©λ‘μλ λΌμ΄λ κ³ μ ν μ«μλ₯Ό μ¬μ©νμΈμ.
- λ³Έλ¬Έ ν μ€νΈκ° μλ λμ€νλ μ΄ μ λͺ©μλ μμ ν©μμ μ€μμλ₯Ό μ¬μ©νμΈμ.
- μ½μ΄ λλ λ μ΄λΈμ΄ μ μ΄μ°λ¬μ§λλ‘ μλ¬Έμ λλ¬Έμ(μ€λͺ°μΊ‘)λ₯Ό μ¬μ©νμΈμ.
3. CSS μ¬μ©μ μ§μ μμ±μΌλ‘ ꡬμ±νκΈ°
μ½λλ₯Ό κΉ¨λνκ³ μ μ§λ³΄μνκΈ° μ½κ² μ μ§νλ €λ©΄, CSS μ¬μ©μ μ§μ μμ±(λ³μ)μ κΈ°λ₯ μ‘°ν©μ μ μνμΈμ. μ΄λ κ² νλ©΄ μΌκ΄λκ² μ μ©νκ³ ν κ³³μμ μ€μ μ§μ€μ μΌλ‘ μ λ°μ΄νΈνκΈ°κ° μ¬μμ§λλ€.
μμ:
:root {
--font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
--font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
--font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}
body {
font-feature-settings: var(--font-features-body);
}
h1, h2, h3 {
font-feature-settings: var(--font-features-heading);
}
.price, .code, .table-cell {
font-feature-settings: var(--font-features-data);
}
4. λ―Έλ¬ν¨μ΄ ν΅μ¬μ λλ€
μ΅κ³ μ νμ΄ν¬κ·ΈλνΌλ μ’ μ’ λ³΄μ΄μ§ μμ΅λλ€. λͺ©νλ κΈ°μ μ체μ μ£Όμλ₯Ό λμ§ μμΌλ©΄μ κ°λ μ±κ³Ό λ―Ένμ ν₯μμν€λ κ²μ λλ€. μ¬μ© κ°λ₯ν λͺ¨λ κΈ°λ₯μ μΌκ³ μΆμ μ νΉμ νΌνμΈμ. μ¬λ°λ₯Έ λ¬Έλ§₯μ μ μ©λ λͺ κ°μ§ μ μ νλ κΈ°λ₯μ΄ λͺ¨λ κ²μ νΌλμ€λ½κ² μμ΄ λμ κ²λ³΄λ€ ν¨μ¬ λ ν° μν₯μ λ―ΈμΉ κ²μ λλ€.
κ²°λ‘ : μΉ νμ΄ν¬κ·ΈλνΌμ μλ‘μ΄ μ§ν
CSS ν°νΈ κΈ°λ₯ κ°μ λ§μ€ν°νλ κ²μ λͺ¨λ μΉ κ°λ°μλ λμμ΄λμκ² λ³νμ μΈ λ¨κ³μ λλ€. μ΄λ ν°νΈ ν¬κΈ°μ κ΅΅κΈ°λ₯Ό μ€μ νλ κΈ°λ³Έ λ©μ»€λμ¦μ λμ΄ μ§μ ν λμ§νΈ νμ΄ν¬κ·ΈλνΌμ μμμΌλ‘ μ°λ¦¬λ₯Ό μ΄λλλ€. ν°νΈ λ΄μ λ΄μ₯λ νλΆν κΈ°λ₯μ μ΄ν΄νκ³ νμ©ν¨μΌλ‘μ¨, μ°λ¦¬λ μΈμμ μΉ λμμΈ μ¬μ΄μ μ€λ 격차λ₯Ό μ€μ΄κ³ , κΈ°λ₯μ μ΄κ³ μ κ·Ό κ°λ₯ν λΏλ§ μλλΌ νμ΄ν¬κ·ΈλνΌμ μΌλ‘ μλ¦λ΅κ³ μ κ΅ν λμ§νΈ κ²½νμ λ§λ€ μ μμ΅λλ€.
λ°λΌμ λ€μμ νλ‘μ νΈλ₯Ό μν΄ ν°νΈλ₯Ό μ νν λ, κ±°κΈ°μ λ©μΆμ§ λ§μΈμ. λ¬Έμλ₯Ό νκ³ λ€κ³ , λΈλΌμ°μ μ κ°λ°μ λκ΅¬λ‘ κ²μ¬νλ©°, κ·Έ μμ μ¨κ²¨μ§ νμ λ°κ²¬νμΈμ. ν©μ, μ«μ, μ€νμΌ μΈνΈλ₯Ό μ€νν΄λ³΄μΈμ. μ΄λ¬ν μΈλΆ μ¬νμ λν μ¬λ¬λΆμ κ΄μ¬μ μ¬λ¬λΆμ μμ μ λ보μ΄κ² νκ³ λͺ¨λλ₯Ό μν λ μΈλ ¨λκ³ κ°λ μ± μλ μΉμ κΈ°μ¬ν κ²μ λλ€.